﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店铺装修</title>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <style>
        .advert-img-size {
            width: 192px;
            height: 108px;
        }
    </style>
    <!-- 引入组件库 -->
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/utils.js" th:src="@{/js/utils.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">店铺装修</h1>
            <div class="breadcrumb"><a href="javascript:top.location.reload();">首页</a><span>/</span>店铺装修</div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="view-title"><h2 class="title_h">店铺装修</h2></div>

            <el-form v-cloak>
                <el-form-item>
                    <label>店铺广告图</label>
                    <el-form :inline="true">
                        <el-form-item>
                            <div class="upload-image-box advert-img-size" v-if="vendorBasic.advert1">
                                <div class="upload-image">
                                    <img :src="vendorBasic.advert1">
                                    <span class="upload-operate">
                                        <i class="el-icon-arrow-left" @click="moveLeft(1)" title="左移"></i>
                                        <i class="el-icon-arrow-right" @click="moveRight(1)" title="右移"></i>
                                        <i class="el-icon-delete" @click="removeAdvert(1)" title="删除"></i>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="upload-image-box advert-img-size" v-if="vendorBasic.advert2">
                                <div class="upload-image">
                                    <img :src="vendorBasic.advert2">
                                    <span class="upload-operate">
                                        <i class="el-icon-arrow-left" @click="moveLeft(2)" title="左移"></i>
                                        <i class="el-icon-arrow-right" @click="moveRight(2)" title="右移"></i>
                                        <i class="el-icon-delete" @click="removeAdvert(2)" title="删除"></i>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="upload-image-box advert-img-size" v-if="vendorBasic.advert3">
                                <div class="upload-image">
                                    <img :src="vendorBasic.advert3">
                                    <span class="upload-operate">
                                        <i class="el-icon-arrow-left" @click="moveLeft(3)" title="左移"></i>
                                        <i class="el-icon-arrow-right" @click="moveRight(3)" title="右移"></i>
                                        <i class="el-icon-delete" @click="removeAdvert(3)" title="删除"></i>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="upload-image-box advert-img-size" v-if="vendorBasic.advert4">
                                <div class="upload-image">
                                    <img :src="vendorBasic.advert4">
                                    <span class="upload-operate">
                                        <i class="el-icon-arrow-left" @click="moveLeft(4)" title="左移"></i>
                                        <i class="el-icon-arrow-right" @click="moveRight(4)" title="右移"></i>
                                        <i class="el-icon-delete" @click="removeAdvert(4)" title="删除"></i>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="upload-image-box advert-img-size" v-if="vendorBasic.advert5">
                                <div class="upload-image">
                                    <img :src="vendorBasic.advert5">
                                    <span class="upload-operate">
                                        <i class="el-icon-arrow-left" @click="moveLeft(5)" title="左移"></i>
                                        <i class="el-icon-arrow-right" @click="moveRight(5)" title="右移"></i>
                                        <i class="el-icon-delete" @click="removeAdvert(5)" title="删除"></i>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div class="upload-image-box cur_pointer advert-img-size" @click="showAdvertDialog()" v-if="!vendorBasic.advert5">
                                <span class="upload-button">
                                    <i class="el-icon-upload"></i>添加图片
                                </span>
                            </div>
                        </el-form-item>
                        <p class="f_ccc fz20 m_mb10 m_plr4">最多5张图片，建议尺寸690*320px，可为店铺环境，产品广告等</p>
                    </el-form>
                </el-form-item>

                <el-form-item>
                    <label>店铺广告图</label>
                    <div class="upload-image-box advert-img-size" v-if="vendorBasic.shopInvitingImg">
                        <div class="upload-image">
                            <img :src="vendorBasic.shopInvitingImg">
                            <span class="upload-operate">
                        <i class="el-icon-delete" @click="removeShopImage()" title="删除"></i>
                    </span>
                        </div>
                    </div>
                    <div class="upload-image-box cur_pointer advert-img-size" @click="showShopImageDialog()" v-if="!vendorBasic.shopInvitingImg">
                    <span class="upload-button">
                        <i class="el-icon-upload"></i>添加图片
                    </span>
                    </div>
                    <p class="f_ccc fz20 m_mb10 m_plr4">建议尺寸750*200px</p>
                </el-form-item>

                <el-form-item>
                    <label>推荐分类</label>
                    <el-form label-position="left" label-width="200px">
                        <el-form-item label="招牌">
                            <el-switch v-model="vendorBasic.showSign"></el-switch>
                        </el-form-item>
                        <el-form-item label="优惠">
                            <el-switch v-model="vendorBasic.showPromotion"></el-switch>
                        </el-form-item>
                    </el-form>
                </el-form-item>
            </el-form>

            <div class="edit-button-fixed">
                <div class="edit-button z-yuan-butn">
                    <el-button type="primary" @click="save" :loading="loading">保存</el-button>
                    <el-button @click="toHomePage">返回</el-button>
                </div>
            </div>
        </div>
    </div>


    <el-dialog title="上传店铺广告图片" :visible.sync="dialogAdvertVisible">
        <el-upload
                ref="upload"
                action="/fastdfs/file/uploadFile"
                :multiple=false
                :limit="1"
                list-type="picture"
                :file-list="fileList"
                :on-success="handleAdvertSuccess"
                :on-remove="handleAdvertRemove"
                :before-upload="beforeAvatarUpload">
            <el-button size="medium">+&nbsp;点击选择图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleAdvertConfirm">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="上传店招图片" :visible.sync="dialogShopImageVisible">
        <el-upload
                ref="upload"
                action="/fastdfs/file/uploadFile"
                :multiple=false
                :limit="1"
                list-type="picture"
                :file-list="fileList"
                :on-success="handleShopImageSuccess"
                :on-remove="handleShopImageRemove"
                :before-upload="beforeAvatarUpload">
            <el-button size="medium">+&nbsp;点击选择图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleShopImageConfirm">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            loading: false,
            dialogAdvertVisible: false,//上传店铺广告图片
            dialogShopImageVisible: false,//上传店招图片
            fileList: [],
            vendorBasic: [[${vendorBasic}]],
            showSign: false,
            showPromotion: false,
            size: 0,
        },
        created: function () {
            for (let i = 5; i >= 1; i--) {
                if (this.vendorBasic["advert" + i] != "") {
                    this.size = i;
                    return;
                }
            }
            this.size = 0;
        },
        methods: {
            showAdvertDialog: function () {
                this.fileList = [];
                this.dialogAdvertVisible = true;
            },
            showShopImageDialog: function () {
                this.fileList = [];
                this.dialogShopImageVisible = true;
            },
            moveLeft: function (index) {
                if (index !== 1) {
                    let prev = this.vendorBasic['advert' + (index - 1)];
                    let curr = this.vendorBasic['advert' + index];
                    let temp = prev;
                    this.vendorBasic['advert' + (index - 1)] = curr;
                    this.vendorBasic['advert' + index] = temp;
                } else {
                    this.$message({
                        showClose: true,
                        duration: 1500,
                        message: '已经是最左边了.',
                        type: 'warning',
                        customClass: 'message-center'
                    });
                }
            },
            moveRight: function (index) {
                var next = this.vendorBasic['advert' + (index + 1)];
                if (index !== 5 && StringUtils.isNotBlank(next)) {
                    var temp = this.vendorBasic['advert' + index];
                    this.vendorBasic['advert' + index] = next;
                    this.vendorBasic['advert' + (index + 1)] = temp;
                } else {
                    this.$message({
                        showClose: true,
                        duration: 1500,
                        message: '已经是最右边了.',
                        type: 'warning',
                        customClass: 'message-center'
                    });
                }
            },
            removeAdvert: function (index) {
                while (index !== 5 && StringUtils.isNotBlank(this.vendorBasic['advert' + (index + 1)])) {
                    let temp = "";
                    this.vendorBasic['advert' + index] = this.vendorBasic['advert' + (index + 1)];
                    this.vendorBasic['advert' + (index + 1)] = temp;
                    index++;
                }
                this.size--;
            },
            removeShopImage: function () {
                this.vendorBasic.shopInvitingImg = "";
            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 1;

                if (!isJPG) {
                    this.$message({
                        message: '广告图只能是 JPG、PNG 格式!',
                        type: 'error',
                        customClass: 'message-center',
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '广告图大小不能超过 1MB!',
                        type: 'error',
                        customClass: 'message-center',
                    });
                }
                return isJPG && isLt2M;
            },
            handleAdvertSuccess: function (response, file, fileList) {
                this.fileList[0] = response.fullPath;
            },
            handleAdvertRemove: function (file, fileList) {
                let self = this;
                $.post("/fastdfs/file/deleteFile",
                    {"fullPath": this.fileList[0]},
                    function (data) {
                        if (data.returnCode === 1) {
                            self.fileList = [];
                        }
                    }, 'json'
                );
            },
            handleAdvertConfirm: function () {
                this.dialogAdvertVisible = false;
                if (StringUtils.isNotBlank(this.fileList[0])) {
                    this.vendorBasic["advert" + (this.size + 1)] = this.fileList[0];
                    this.size++;
                }
            },
            handleShopImageSuccess: function (response, file, fileList) {
                this.fileList[0] = response.fullPath;
            },
            handleShopImageRemove: function (file, fileList) {
                let self = this;
                $.post("/fastdfs/file/deleteFile",
                    {"fullPath": this.fileList[0]},
                    function (data) {
                        if (data.returnCode === 1) {
                            self.fileList = [];
                        }
                    }, 'json'
                );
            },
            handleShopImageConfirm: function () {
                this.dialogShopImageVisible = false;
                if (StringUtils.isNotBlank(this.fileList[0])) {
                    this.vendorBasic.shopInvitingImg = this.fileList[0];
                }
            },
            save: function () {
                // 获取当前图片数量
                if (this.size <= 0) {
                    this.$message({
                        showClose: true,
                        duration: 1500,
                        message: '请上传店铺广告图.',
                        type: 'warning',
                        customClass: 'message-center'
                    });
                    return;
                }
                if (StringUtils.isBlank(this.vendorBasic["shopInvitingImg"])) {
                    this.$message({
                        showClose: true,
                        duration: 1500,
                        message: '请先上传店招.',
                        type: 'warning',
                        customClass: 'message-center'
                    });
                    return;
                }

                var params = {
                    "vendorId": this.vendorBasic.vendorId,
                    "advert1": this.vendorBasic.advert1,
                    "advert2": this.vendorBasic.advert2,
                    "advert3": this.vendorBasic.advert3,
                    "advert4": this.vendorBasic.advert4,
                    "advert5": this.vendorBasic.advert5,
                    "showSign": this.vendorBasic.showSign,
                    "showPromotion": this.vendorBasic.showPromotion,
                    "shopInvitingImg": this.vendorBasic.shopInvitingImg
                };

                let self = this;
                self.loading = true;
                $.post("/vendor/vendorbasic/updateIndex",
                    params,
                    function (data) {
                        if (data.returnCode === 1) {
                            self.$message({
                                showClose: true,
                                duration: 1500,
                                message: '设置首页成功.',
                                type: 'success',
                                customClass: 'message-center',
                                onClose: function () {
                                    window.location.href = '/vendor/vendorbasic/toSetIndex';
                                }
                            });
                        }
                        self.loading = false;
                    }, 'json'
                );
            },
            toHomePage: function () {
                top.location.reload();
            }
        }
    });
</script>
</body>
</html>